<template>
  <div >
    <zh-table
      :title="state.title"
			ref="formParamsRef"
			:columns="state.tableColumn"
      :disabled="false"
      :column-config="{resizable: true}"
      :tree-config="{transform: true, rowField: 'formParamsId', parentField: 'parentId'}"
			highlight-current-row
		>
      <template #writable_header>
          <el-checkbox v-model="checked2">编辑</el-checkbox>
      </template>
      <template #writable_default="{ row }">
          <el-checkbox v-model="row.writable">编辑</el-checkbox>
      </template>
      <template #readable_header>
          <el-checkbox v-model="checked2">只读</el-checkbox>
      </template>
      <template #readable_default="{ row }">
          <el-checkbox v-model="row.readable">只读</el-checkbox>
      </template>
      <template #displayable_header>
          <el-checkbox v-model="checked2">隐藏</el-checkbox>
      </template>
      <template #displayable_default="{ row }">
          <el-checkbox v-model="row.displayable">隐藏</el-checkbox>
      </template>
      <template #required_header>
          <el-checkbox v-model="checked2">必填</el-checkbox>
      </template>
      <template #required_default="{ row }">
          <el-checkbox v-model="row.required">必填</el-checkbox>
      </template>
		</zh-table>
    <div><SvgIcon name="ele-CirclePlus"/>添加表单</div>
    
  </div>
</template>
<script lang="ts" setup name="FlowDrawerAuthForm">
  //表单权限
  //------------------接收传入参数(组件)-------------------
  const props = defineProps({
    readable: {
      type: Boolean,
      default: false,
    },
    node: {
      type: Object,
      default: function() {
        return {};
      },
    },
    value: {
      type: Array,
      default: function() {
        return [];
      },
    },
  });
  //----------------定义子组件 ------------------------------
  const formParamsRef=ref();

  //------------------内部变量定义-------------------------
  const state = reactive({
    tableColumn:[
      { field: 'formParamsId', title: '字段Id', visible: false, fixed: 'left', align: 'center', width: 150 },
      { field: 'field', title: '表单', align: 'center', fixed: 'left',treeNode:'true', minWidth: 200 },
      { field: 'typeName', title: '类型', align: 'center', fixed: 'left', minWidth: 200 },
      { field: 'writable', title: '编辑', align: 'center',  minWidth: 100,slots: {
          default: 'writable_default',
          header: 'writable_header',
        },
      },
      { field: 'readable', title: '只读', align: 'center',  minWidth: 100,slots: {
          default: 'readable_default',
          header: 'readable_header',
        }, },
      { field: 'displayable', title: '隐藏', align: 'center',  minWidth: 100,slots: {
          default: 'displayable_default',
          header: 'displayable_header',
        }, },
      { field: 'required', title: '必填', align: 'center',  minWidth: 100,slots: {
          default: 'required_default',
          header: 'required_header',
        }, },
    ],
    title:'表单权限',
    funcCode:'',
    formList:[]
  })
  //---------------------定义调用方法--------------------------------------
  const queryFormList=()=>{
    let nodeId=props.node?.nodeId;
    if(!nodeId){
      return;
    }
  }
</script>
